<template>
	<view class="m-hotpack-wrap">
		<view class="m-hotpack">
			<image class="m-hotpack-img" :src="hotpackList"></image>
			<view class="m-hotpack-close" @tap="closeHotpack"></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	props: {
		hotpackList: {
			default: '',
			type: String
		}
	},
	methods: {
		closeHotpack() {
			this.$emit('closeHotpack');
		}
		// getCoupons(coupon_id,is_had){
		// 	if(is_had){
		// 		console.log('这张优惠券已经有了')
		// 		return
		// 	}
		// 	this.$emit('getCoupons',coupon_id)
		// }
	}
};
</script>

<style lang="scss">
.m-hotpack-item {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height:300upx;
	margin-top: 2upx;
	padding: 24upx 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.m-hotpack-item image {
	width: 100%;
	height: 100%;
}
.m-hotpack-item:first-child {
	margin-top: 0;
}

.m-hotpack-item-left {
	width: 90upx;
	text-align: center;
	color: #ee2c23;
}

.m-hotpack-item-price {
	font-size: 20px;
	font-weight: bold;
}

.m-hotpack-item-right {
	position: relative;
	width: 326upx;
	padding-left: 20upx;
	padding-right: 60upx;
	box-sizing: border-box;
}

.m-hotpack-item-title {
	font-size: 14px;
	font-weight: bold;
}

.m-hotpack-item-desc {
	font-size: 10px;
	color: #a0a0a0;
	line-height: 1.5;
	margin-top: 6upx;
}

.m-hotpack-item-btn {
	z-index: 999999999999999999999999999999;
	position: absolute;
	right: 10upx;
	top: 0;
	width: 200upx;
	height: 100%;
	// background-image: url('');
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 60upx;
}

.m-hotpack-item-btn.disabled {
	 background-image: url('');
}

.m-hotpack-wrap {
	z-index: 9999999991;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.5);
}
.m-hotpack {
	position: absolute;
	left: 50%;
	top: 45%;
	margin-left: -40vw;
	margin-top: -40vw;
	width: 80vw;
	height: 80vw;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
//background-image: url('');
}

.m-hotpack-content {
	position: absolute;
	bottom: 46vw;
	left: 50%;
	margin-left: -29vw;
	width: 56vw;
	height: 54vw;
	overflow-y: auto;
}

.m-hotpack-close {
	position: absolute;
	bottom: 5vw;
	left: 50%;
	margin-left: -4.5vw;
	width: 9vw;
	height: 9vw;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 90%;
	background-image: url('');
}

.m-hotpack-img{
	width:80vw;
	height:60vw;
}

</style>
